<template>
  <div class="patrol-category-container">
    <div class="patrol-header">
      <div class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>巡更管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div class="patrol-content">
      <!-- 搜索区域 -->
      <div class="search-area">
        <el-input
          v-model="queryParams.searchText"
          placeholder="请输入类别名称"
          prefix-icon="el-icon-search"
          class="search-input"
          clearable
          @keyup.enter.native="handleSearch"
        ></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>

        <el-button type="primary" class="add-button" @click="handleAdd">
          <i class="el-icon-plus"></i> 添加类别
        </el-button>
      </div>

      <!-- 表格区域 -->
      <el-table
        :data="categoryList"
        stripe
        border
        style="width: 100%"
      >
        <el-table-column label="序号" width="80" align="center">
          <template slot-scope="scope">
            {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>

        <el-table-column
          prop="categoryName"
          label="类别名称"
          width="180"
          align="center"
        />

        <el-table-column
          prop="communityName"
          label="所属社区"
          width="180"
          align="center"
        />

        <el-table-column prop="status" label="状态" width="100" align="center">
          <template slot-scope="scope">
            <span
              :class="
                scope.row.status === 1 ? 'status-enabled' : 'status-disabled'
              "
            >
              {{ scope.row.status === 1 ? "启用" : "停用" }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="220" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-view"
              @click="handleView(scope.row)"
              title="查看"
            ></el-button>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
              title="编辑"
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              title="删除"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        searchText: "",
      },
      // 分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      // 表格数据
      categoryList: [],
    };
  },

  created() {
    // 初始加载数据
    this.fetchCategoryList();
  },

  methods: {
    // 获取巡更类别列表
    fetchCategoryList() {
      // 调用API获取数据
      this.$axios
        .post(
          "api/patrol-server/patrolCategory/queryByPageInfo",
          this.queryParams
        )
        .then((response) => {
          if (response.data && response.data.code === 200) {
            const { records, total } = response.data.data;
            this.categoryList = records || [];
            this.total = total || 0;
          } else {
            this.$message.error(response.data.message || "获取巡更类别失败");
          }
        })
        .catch((error) => {
          console.error("获取巡更类别列表出错:", error);
        });
    },

    // 搜索按钮点击事件
    handleSearch() {
      this.pageNum = 1;
      this.fetchCategoryList();
    },

    // 重置搜索条件
    resetSearch() {
      this.queryParams.searchText = "";
      this.pageNum = 1;
      this.fetchCategoryList();
    },

    // 点击添加按钮
    handleAdd() {
      this.$router.push("patrolCategoryAdd");
    },

    // 点击查看按钮
    handleView(row) {
      this.$router.push({
        path: "patrolCategoryView",
        query: { id: row.categoryId },
      });
    },

    // 点击编辑按钮
    handleEdit(row) {
      this.$router.push({
        path: "patrolCategoryEdit",
        query: { id: row.categoryId },
      });
    },

    // 点击删除按钮
    handleDelete(row) {
      this.$confirm("确定要删除该巡更类别吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get(`api/patrol-server/patrolCategory/delete/${row.categoryId}`)
            .then((response) => {
              if (response.data && response.data.code === 200) {
                this.$message.success("删除成功");
                this.fetchCategoryList(); // 重新加载数据
              } else {
                this.$message.error(response.data.message || "删除失败");
              }
            })
            .catch((error) => {
              console.error("删除巡更类别出错:", error);
              this.$message.error("删除巡更类别出错，请稍后重试");
            });
        })
        .catch(() => {
          // 取消删除操作
        });
    },

    // 处理页码变化
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.fetchCategoryList();
    },

    // 处理每页显示条数变化
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.pageNum = 1;
      this.fetchCategoryList();
    },
  },
};
</script>

<style scoped>
.patrol-category-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 60px);
}

.patrol-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.breadcrumb {
  font-size: 14px;
}

.patrol-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-area {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.search-input {
  width: 200px;
  margin-right: 10px;
}

.add-button {
  margin-left: auto;
}

.status-enabled {
  color: #67c23a;
}

.status-disabled {
  color: #f56c6c;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
